<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>今天天气很{{isHot?"炎热":"寒冷"}}</h2>
      <button v-on:click="changeWeather">点击改变天气</button>
    </div>
    <script>
      Vue.config.productionTip = false;
      new Vue({
        el: "#app",
        data() {
          return {
            isHot: true,
            //在data中书写普通函数，函数内的this指向全局window，严格模式下会指向null。
            //在data中书写箭头函数，函数内的this是指向当前的vue实例对象。
            //所以我们不会把函数书写在data中。（原因1：必须书写箭头函数。原因2：函数和数据混杂书写在一起不容易维护，data用来专门存放数据的。）

            /*
            changeWeather() {
               console.log(this);
             },
            changeWeather: () => {
               console.log(this);
             },
            */
          };
        },

        /* 
           methods选项中用来书写方法,比如事件回调函数,也有我们自己封装的函数等等。
           methods中的方法已经被vue统一处理过了,vue控制methods中所有的方法的this指向当前的vue实例。
           为什么要把methods方法的this指向vm实例呢?
           因为方法一般都是用来操作数据的,而数据都在vm实例上放。
           methods中的方法也会全部的放在vm实例上,供我们使用。
        */
        methods: {
          changeWeather() {
            // console.log(this);
            this.isHot = !this.isHot;
          },
        },
      });
    </script>
  </body>
</html>
